<script setup>
/* 主窗口顶部标题栏 */
import {ipc} from '@/utils/ipcRenderer'
import {ipcApiRoute} from '@/api/main'
import {NIcon} from 'naive-ui'
import {SwitchButton} from '@element-plus/icons-vue'
import {appReloadSymbol} from '@/utils/provideKey'
import {useGlobalConf} from '@/utils/useGlobalConf'
import {useLocale} from '@/utils/useLocale'
const {globalConf, setGlobalConf} = useGlobalConf()
const $navbarI18n = useLocale('navbar')
const $router = useRouter()
const loadingShow = ref(false)
const props = defineProps({
  options: {
    type: Object,
    default: {
      logoShow: true,//是否显示Logo
      refreshShow: true,//是否显示更新按钮
      settingShow: true,//是否显示设置按钮
      notifyShow: true,//是否显示通知按钮
      accountShow: true//是否显示账户按钮
    }
  }
})
const appReload = inject(appReloadSymbol)
const pinTips = ref(null)
//置顶状态更改时，更改图标提示
watchEffect(() => {
  pinTips.value = globalConf.appMainPinned ? $navbarI18n.value.unpinned : $navbarI18n.value.pinned
})
//关闭主窗口
const closeWin = () => {
  ipc.invoke(ipcApiRoute['window.close']).then(({state, message}) => {
    if (!state) {
      ipc.send(ipcApiRoute['nativeBox.showBox'], {
        type: 'error',
        title: 'System Error',
        detail: message
      })
    }
  })
}
//主窗口重置
const restoreWin = () => {
  ipc.invoke(ipcApiRoute['window.restore'], {
    appConfigProp: 'appMainIsMaximized'
  }).then(ret => {
    setGlobalConf({
      appMainIsMaximized: Boolean(ret)
    })
  })
}
//主窗口最小化
const minimumWin = () => {
  ipc.send(ipcApiRoute['window.minimum'])
}
//主窗口置顶
const winPin = () => {
  ipc.invoke(ipcApiRoute['window.pin'], {
    appConfigProp: 'appMainPinned'
  }).then(ret => {
    setGlobalConf({
      appMainPinned: Boolean(ret)
    })
  })
}
//打开设置窗口
const showSetting = () => {
  const id = window.confWindow = 'conf'
  loadingShow.value = true
  ipc.invoke(ipcApiRoute['childWindow.create'], {
    id,
    indexPath: '/conf',
    options: {
      parent: 'main',
      modal: true,
      center: true,
      width: 650,
      height: 750,
      minWidth: 650,
      minHeight: 750,
      maximizable: false,
      resizable: false
    },
    asyncWindow: false
  }).then(({state, message}) => {
    loadingShow.value = false
    if (!state) {
      ipc.send(ipcApiRoute['nativeBox.showBox'], {
        type: 'error',
        title: 'System Error',
        detail: message
      })
    }
  })
}
//刷新页面
const refreshPage = () => {
  appReload()
}
//个人中心
const homeOptions = [
  {
    label: () => {
      return h('span', $navbarI18n.value.logout)
    },
    key: 'logout',
    icon: () => {
      return h(
          NIcon,
          null,
          {
            default: () => {
              return h(SwitchButton)
            }
          }
      )
    }
  }
]
const handleSelect = key => {
  switch (key) {
    case 'logout'://登出
      $router.push('/auth/login')
      break
  }
}
</script>

<template>
  <div class="spin-container" v-show="loadingShow">
    <n-spin :rotate="false">
      <template #icon>
        <spin-dot size="md"/>
      </template>
      <template #description>
        Window Is Starting...
      </template>
    </n-spin>
  </div>
  <nav class="win-bar">
    <div class="wrap-left">
      <img v-if=" props.options.logoShow " src="@/assets/logo.png" height="25" alt="Logo">
    </div>
    <div class="wrap-right">
      <!--刷新-->
      <n-popover v-if=" props.options.refreshShow " trigger="hover" display-directive="show">
        <template #trigger>
          <n-icon class="i-refresh" size="17" @click.stop="refreshPage">
            <icon-ep-refresh/>
          </n-icon>
        </template>
        <span slot="default">{{ $navbarI18n.refresh }}</span>
      </n-popover>
      <!--设置-->
      <n-popover v-if=" props.options.settingShow " trigger="hover" display-directive="show">
        <template #trigger>
          <n-icon class="i-setting" size="17" @click="showSetting">
            <icon-ep-setting/>
          </n-icon>
        </template>
        <span slot="default">{{ $navbarI18n.settings }}</span>
      </n-popover>
      <!--消息-->
      <n-popover v-if=" props.options.notifyShow " :to="false" placement="bottom-end" trigger="click"
                 style="--n-border-radius:8px;background-color:var(--modal-color);">
        <template #trigger>
          <n-popover trigger="hover" display-directive="show">
            <template #trigger>
              <n-icon class="i-bell" size="17">
                <icon-ep-bell/>
              </n-icon>
            </template>
            <span slot="default">{{ $navbarI18n.message }}</span>
          </n-popover>
        </template>
        <n-tabs class="messages" default-value="todo" justify-content="center" type="line"
                tab-style="padding:10px 24px">
          <n-tab-pane class="_tab-content" name="todo" :tab="$navbarI18n.todo">
            <div class="_tab-content--empty">
              <n-icon class="icon-unmsg" size="150">
                <icon-mm-unmsg/>
              </n-icon>
              <span class="text-tips">
                {{ $navbarI18n.completeTodo }}
              </span>
            </div>
          </n-tab-pane>
          <n-tab-pane class="_tab-content" name="notifies" :tab="$navbarI18n.notification">
            <div class="_tab-content--empty">
              <n-icon class="icon-unmsg" size="150">
                <icon-mm-unmsg/>
              </n-icon>
              <span class="text-tips">
                {{ $navbarI18n.reviewedNotification }}
              </span>
            </div>
          </n-tab-pane>
        </n-tabs>
      </n-popover>
      <!--个人中心-->
      <n-icon v-if=" props.options.accountShow " class="i-home" size="25" :title="$navbarI18n.home">
        <n-dropdown trigger="click" :options="homeOptions" :show-arrow="true" @select="handleSelect">
          <icon-mm-home :style="{ outline: 'none' }"/>
        </n-dropdown>
      </n-icon>
      <!--置顶-->
      <n-popover trigger="hover" display-directive="show">
        <template #trigger>
          <n-icon :class="['i-deskpin', globalConf.appMainPinned ? 'pin-activated': null ]" size="15" @click="winPin">
            <icon-mm-deskpin/>
          </n-icon>
        </template>
        <span slot="default">{{ pinTips }}</span>
      </n-popover>
      <!--最消化窗口-->
      <n-icon class="i-minus" size="15" @click="minimumWin">
        <icon-ep-minus/>
      </n-icon>
      <!--恢复窗口-->
      <n-icon class="i-minimum" size="15" @click="restoreWin">
        <icon-mm-minimum v-show="globalConf.appMainIsMaximized"/>
        <icon-mm-maximize v-show="!globalConf.appMainIsMaximized"/>
      </n-icon>
      <!--关闭窗口-->
      <n-icon class="i-close" size="15" @click="closeWin">
        <icon-ep-close/>
      </n-icon>
    </div>
  </nav>
</template>

<style scoped lang="less">
.spin-container {
  position: fixed;
  top: 1px;
  bottom: 1px;
  left: 1px;
  right: 1px;
  z-index: 1993;

  display: flex;
  justify-content: center;
  align-items: center;
}

.win-bar {
  app-region: drag;
  -webkit-app-region: drag;
  user-select: none;
  -webkit-user-select: none;
  height: var(--common-navbar-height);
  background-color: var(--action-color);
  padding: 0 6px;
  display: flex;
  box-sizing: border-box;
  position: fixed;
  top: 1px;
  left: 1px;
  right: 1px;
  z-index: 88;

  .wrap-left,
  .wrap-right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }

  .wrap-left {
    flex-basis: 100%;
    box-sizing: border-box;
    padding-left: 8px;
  }

  .wrap-right {
    flex-shrink: 0;
    justify-content: flex-end;

    .i-refresh,
    .i-setting,
    .i-bell {
      -webkit-app-region: no-drag;
      cursor: pointer;
      padding: 6px;
      border-radius: 4px;
      color: var(--text-color-2);

      &:hover {
        background-color: var(--hover-color);
      }
    }

    .i-home {
      -webkit-app-region: no-drag;
      padding: 0 22px;
      color: var(--primary-color);
      cursor: pointer;
    }

    .i-deskpin,
    .i-minus,
    .i-minimum,
    .i-close {
      -webkit-app-region: no-drag;
      cursor: pointer;
      padding: 8px;
      border-radius: 6px;
      color: var(--text-color-2);

      &:hover {
        background-color: var(--hover-color);
      }
    }

    .i-deskpin {
      &.pin-activated {
        color: var(--primary-color);
        background-color: var(--primary-background-color);
      }
    }

    .i-close {
      &:hover {
        background-color: var(--error-background-color);
        color: var(--error-color-hover);
      }
    }

  }
}

.messages {
  width: 300px !important;
}

._tab-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 36px !important;

  &--empty {
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon-unmsg {
      height: .9em !important;
      color: var(--icon-color-pressed);
    }

    .text-tips {
      padding-top: 6px;
      padding-bottom: 48px;
      font-size: 14px;
      color: var(--text-color-3);
    }
  }
}
</style>
